<template>
  <div class="admin">
    <el-container style="height:100vh">
      <el-aside width="200px">
        <el-menu router :default-active="$route.path" active-text-color="#eba613">
          <template v-for="item in aMenu">
            <template v-if="item.children && item.children.length">
              <el-submenu :index="item.path" :key="item.path">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>{{ item.meta.title }}</span>
                </template>
                <el-menu-item :index="it.path" v-for="it in item.children" :key="it.path">
                  <i class="el-icon-menu"></i>
                  {{ it.meta.title }}
                </el-menu-item>
              </el-submenu>
            </template>
            <template v-else>
              <el-menu-item :index="item.path" :key="item.path">
                <i class="el-icon-menu"></i>
                <span>
                  {{ item.meta.title }}
                </span>
              </el-menu-item>
            </template>

          </template>

        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <span class="title">高校图书馆管理系统</span>
          <el-dropdown trigger="click" @command="handleCommand">
            <span class="el-dropdown-link">
              <el-avatar :src="bindIMG(user.avatar.filename)" v-if="user.avatar"> </el-avatar>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="goIndex">跳转前台</el-dropdown-item>
              <el-dropdown-item command="logOut">退出系统</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// import { aMenu } from '@static'
import { mapState } from 'vuex'
import mixins from '@mixins'
import { bindIMG } from '@utils'
export default {
  data () {
    return {
      // aMenu
    }
  },
  computed: {
    ...mapState({ active: 'currentAMenu', user: 'currentUser' }),
    aMenu () {
      const routes = this.$router.options.routes
      console.log('111111111', routes);
      return routes.find((i) => i.isAdmin).children.filter((i) => i.meta && i.meta.show)
    }
  },
  methods: {
    bindIMG,
    handleCommand (callback) {
      this[callback] && this[callback]()
    },
    goIndex () {
      this.$router.push({ name: 'home' })
    },
    async getUser () {
      const [avatar] = await this.$api.getFileById({ id: this.user.id })
      this.$set(this.user, 'avatar', avatar)
    }
  },
  mixins: [mixins.admin],
  created () {
    this.getUser()
  }
}
</script>

<style lang="less" scoped>
/deep/.el-menu {
  height: 100%;
}

.el-header {
  line-height: 60px;

  .title {
    font-size: 24px;
    letter-spacing: 0.1em b;
  }
}

.el-main {
  background-color: #f8f8f8;
}

.el-dropdown {
  float: right;
  height: 60px;
  margin-right: 10px;

  .el-avatar {
    vertical-align: middle;
  }
}

.el-menu-item:focus,
.el-menu-item:hover {
  background-color: #e8f0ff;
}
</style>
